<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图渲染</title>
    <link rel="stylesheet" href="../../../css/main.css">
    <script src="../../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="renderMap" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    /*
     * echarts 封装调用
     *
     *
     * 该类主要包括echarts option对象属性的读取
     * 业务数据获取
     * 地图加载
     * loadRenderMapBusinessData()
     * loadRenderMapMap()
     *
     */
    /*$(function()
    {
        // 初始echars类
        var echartsClass = new EchartsClass(function();
        {
            // 业务数据请求url
            var url = "";
            // 构造业务查询条件
            var queryBo = new Object();
            queryBo.startDate = "";
            //此处自行构建。。。。。

            // 构造mapOption对象
            var mapObj = Object();
            mapObj.url = ""; // 地图geo数据url
            mapObj.id = ""; //  地图id
            mapObj.text = "警情散点图" // 设置地标题
            mapObj.zoom = ""; // 地图缩放等级
            mapObj.center = []; // 地图中心点

            echartsClass.loadScatterMapBusinessData(url,queryBo,mapObj);
        });
    });*/

    var mapOption;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。
    var mapChart = echarts.init(document.getElementById('renderMap'));// 初始化echarts对象为mapChart
    // 产生随机数
    function randomValue()
    {
        return Math.round(Math.random()*1500);
    }
    /*
     * 读取echarts Option配置数据
     */
    $(function()
    {
        getOption();
    });
    /*
     * 读取echarts Option配置数据
     */
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../../config/interval_render_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            mapOption = option;
            getMap();
        });
    }
    /*
     * 读取geo地图数据并注入echarts api
     */
    function getMap()
    {
        var data = [
            {name: '长治县', value: randomValue()},
            {name: '屯留县', value: randomValue()},
            {name: '襄垣县', value: randomValue()},
            {name: '城区', value: randomValue()},
            {name: '平顺县', value: randomValue()},
            {name: '黎城县', value: randomValue()},
            {name: '壶关县', value: randomValue()},
            {name: '长子县', value: randomValue()},
            {name: '沁县', value: randomValue()},
            {name: '武乡县', value: randomValue()},
            {name: '沁源县', value: randomValue()},
            {name: '潞城市', value: randomValue()},
            {name: '郊区', value: randomValue()}];
        // 地图json文件的地址
        var mapUrl = "../../../mapData/map/json/shanxi/changzhi.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            echarts.registerMap("chanzghi", json); // 注册地图
            mapOption.series[0].mapType = "chanzghi"; // 设置geo坐标系地图名称
            mapOption.series[0].zoom = 0; // 设置地图缩放等级
            mapOption.series[0].center = [113.101211,36.418388];// 设置地图中心点
            /*
             * 系列数据
             */
            mapOption.series[0].data = data; // 设置业务数据

            mapChart.setOption(mapOption);// 把加工好的mapOption注入echarts api。
        });
    }
    setInterval(getMap, 2000);
</script>
</html>